<template>
	<view class="child" v-if="data.length !== 0">
		<view class="item" v-for="item in data" :key="item.id">
			<image :src="item.img" mode=""></image>
			<text class="title">{{item.title}}</text>
			<view class="bottom">
				<text v-if="index == 1 || 3">
					￥
					<text style="font-size: 28upx;">{{item.price}}</text>
				</text>
				<text v-else></text>
				<text style="color: grey;" v-if="index == 1">已有{{item.proper}}人收藏</text>
				<text style="color: grey;" v-if="index == 2">{{item.proper}}人点赞</text>
				<text style="color: grey;" v-if="index == 3">{{item.proper}}人想要</text>
			</view>
		</view>
	</view>
	<view class="showView" v-else>
		暂无数据哦！
	</view>
</template>

<script>
	export default {
		props: ['index', 'otherUserId'],
		data() {
			return {
				data: []
			};
		},
		created() {
			// console.log(this.otherUserId)
			this.$api.getOthertUserId(this.otherUserId).then(res => {
				// console.log(res)
				if(res.code == 200) {
					this.data = res.data
				}
			})
		}
	}
</script>

<style lang="scss">
	.child {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 48%;
			height: 350upx;
			margin: 20upx 0;
			border-radius: 16upx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-shadow: 0px 4upx 18upx rgba(0, 0, 0, 0.1);

			image {
				width: 100%;
				height: 65%;
			}

			.title {
				width: 100%;
				color: grey;
				font-size: 28upx;
				box-sizing: border-box;
				padding: 0 20upx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}

			.bottom {
				color: red;
				box-sizing: border-box;
				padding: 0 20upx 20upx;
				font-size: 24upx;
				display: flex;
				justify-content: space-between;
			}
		}
	}
	.showView {
		text-align: center;
		margin: 200upx auto 0;
	}
</style>
